<template>
  <div class="about" @click="setBs">
    <!-- 顶部 -->
    <header class="wrap">
      <!-- 测一测图片 -->
      <div class="search">
        <img src="../../assets/images/skd-image/search1.png" />
      </div>
      <p>测一测</p>
      <!-- 设置图片 -->
      <div class="setting">
        <img src="../../assets/images/skd-image/shape24.png" alt="" />
      </div>
    </header>

    <!-- 细线 -->
    <div class="line"></div>

    <!-- 滚动容器 -->
    <div class="wrapper">
      <!-- 滚动内部 -->
      <div class="box">

        <!-- 个人信息 -->
        <div class="msg">
          <!-- 内部图片 -->
          <div class="head">
            <img src="../../assets/images/skd-image/head.png" alt="" />
          </div>
          <!-- 用户id -->
          <p @click="login">立即登录</p>
          <!-- 关注和粉丝 -->
          <div class="follow-num">0</div>
          <div class="fans-num">0</div>
          <div class="follow">关注</div>
          <div class="fans">粉丝</div>
        </div>

        <!-- 可以跳转部分 -->
        <div class="content">
          <!-- 可以肤质变化部分 -->
          <div class="vary" @click="GoToSkin">
            <div class="font">肤质变化</div>
            <div class="img">
              <img src="../../assets/images/skd-image/vary.png" alt="" />
            </div>
          </div>

          <!-- 可以测肤图像部分 -->
          <div class="image" @click="change">
            <div class="font">测肤图像</div>
            <div class="img">
              <img src="../../assets/images/skd-image/image.png" alt="" />
            </div>
          </div>

          <!-- 可以测一测历史部分 -->
          <div class="history">
            <div class="font">测一测历史</div>
            <div class="img">
              <img src="../../assets/images/skd-image/history.png" alt="" />
            </div>
          </div>
        </div>

        <!-- 中间细线部分 -->
        <div class="center-line"></div>

        <!-- 我用过的产品部分 -->
        <div class="product">
          <div class="img">
            <img src="../../assets/images/skd-image/product.png" alt="" />
          </div>
          <span>我用过的产品</span>
          <div class="arrow">></div>
        </div>

        <!-- banner部分 -->
        <div class="banner">
          <img src="../../assets/images/skd-image/banner.png" alt="" />
        </div>

        <!-- 我收藏的产品部分 -->
        <div class="collection">
          <div class="img">
            <img src="../../assets/images/skd-image/collection.png" alt="" />
          </div>
          <span>我收藏的产品</span>
          <div class="arrow">></div>
        </div>

        <!-- 我关注的品牌部分 -->
        <div class="follow">
          <div class="img">
            <img src="../../assets/images/skd-image/follow.png" alt="" />
          </div>
          <span>我关注的品牌</span>
          <div class="arrow">></div>
        </div>

        <!-- 灰色线条部分 -->
        <div class="gray-line"></div>

        <!-- 我发布的贴子部分 -->
        <div class="release">
          <div class="img">
            <img src="../../assets/images/skd-image/release.png" alt="" />
          </div>
          <span>我发布的贴子</span>
          <div class="arrow">></div>
        </div>

        <!-- 我收藏的文章部分 -->
        <div class="article">
          <div class="img">
            <img src="../../assets/images/skd-image/article.png" alt="" />
          </div>
          <span>我收藏的文章</span>
          <div class="arrow">></div>
        </div>

        <!-- 我收藏的贴子部分 -->
        <div class="post">
          <div class="img">
            <img src="../../assets/images/skd-image/post.png" alt="" />
          </div>
          <span>我收藏的贴子</span>
          <div class="arrow">></div>
        </div>

        <!-- 我的订单管理部分 -->
        <div class="cart">
          <div class="img">
            <img src="../../assets/images/skd-image/cart.png" alt="" />
          </div>
          <span>我的订单管理</span>
          <div class="arrow">></div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import BScroll from "better-scroll";
export default {
  methods: {
    change() {
      this.$router.push("/testimage");
    },
    login() {
      this.$router.push("/login");
    },
    GoToSkin() {
      this.$router.push("/skinchange");
    },
    setBs() {
      new BScroll(".about", {
        scrollX:false,
        scrollY:true,
        click:true,
      });
    },
  },
  mounted() {
    new BScroll('.wrapper', {
      scrollX: false,
      scrollY: true,
      click: true,
    });
  },
}
</script>

<style lang="less" scoped>
.about {
  // overflow: scroll;
  // overflow: hidden;
  // margin-bottom: 50px;

  /* 顶部样式 */
  .wrap {
    display: flex;
    position: fixed;
    width: 100%;
    height: 50px;
    font-size: 16px;
    line-height: 50px;
    background: #fff;
    z-index: 99;

    /* 测一测图片样式 */
    .search {
      width: 23px;
      height: 23.5px;
      position: absolute;
      top: 8px;
      left: 15px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    /* 测一测文字样式 */
    p {
      display: flex;
      align-items: center;
      margin-left: 44.5px;
      left: 44.5px;
    }

    /* 设置图片样式 */
    .setting {
      width: 21.5px;
      height: 21.5px;
      position: absolute;
      right: 16.5px;
      top: 8px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  /* 细线样式 */
  .line {
    height: 1px;
    width: 100%;
    background-color: #f1f1f1;
  }

/* 滚动容器样式 */
.wrapper{
  width:100%;
  // height:600px;
  overflow: hidden;
  position: fixed;
  top:50px;
  bottom: 70px;
}
.box{
  /* 信息样式 */
  .msg {
    width: 100%;
    height: 133.5px;
    display: flex;
    // margin-top: 50px;
    position: relative;
    // z-index: -99;

    /* 信息内部的头像样式 */
    .head {
      width: 74px;
      height: 74px;
      // background-color: aquamarine;
      position: absolute;
      left: 16.5px;
      top: 22.5px;
      img {
        width: 100%;
        height: 100%;
      }
    }

    /* 信息内部的ID样式 */
    p {
      font-size: 16px;
      font-weight: bold;
      position: absolute;
      top: 35.5px;
      left: 112.5px;
    }

    /* 信息内部的受关注数量样式 */
    .follow-num {
      width: 20px;
      height: 15px;
      font-size: 16px;
      position: absolute;
      top: 77px;
      left: 131.5px;
    }

    /* 信息内部的粉丝数量样式 */
    .fans-num {
      width: 20px;
      height: 15px;
      font-size: 16px;
      position: absolute;
      top: 77px;
      left: 213.5px;
    }

    /* 信息内部的粉丝文字样式 */
    .fans {
      width: 24px;
      height: 11.5px;
      font-size: 12px;
      position: absolute;
      top: 98.5px;
      left: 211.5px;
    }

    /* 信息内部的粉丝文字样式 */
    .follow {
      width: 24px;
      height: 11.5px;
      font-size: 12px;
      position: absolute;
      top: 98.5px;
      left: 127.5px;
    }
  }

  /* 跳转页面的样式 */
  .content {
    display: flex;
    width: 100%;
    height: 129px;

    /* 肤质变化的样式 */
    .vary {
      width: 128px;
      height: 105.5px;
      font-size: 15px;
      margin-left: 4.5px;
      position: relative;

      /* 肤质变化内部的文字样式 */
      .font {
        width: 67px;
        height: 14.5px;
        font-weight: bold;
        position: absolute;
        top: 22.5px;
        left: 21.5px;
      }
      /* 肤质变化内部的图片样式 */
      .img {
        width: 45px;
        height: 45px;
        position: absolute;
        top: 40px;
        left: 63px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    /* 测肤图像的样式 */
    .image {
      width: 128px;
      height: 105.5px;
      font-size: 15px;
      position: relative;

      /* 测肤图像内部的文字样式 */
      .font {
        width: 67.5px;
        height: 14.5px;
        font-weight: bold;
        position: absolute;
        top: 22.5px;
        left: 21.5px;
      }

      /* 测肤图像内部的图片样式 */
      .img {
        width: 45px;
        height: 45px;
        position: absolute;
        top: 40px;
        left: 62.5px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    /* 测一测历史的样式 */
    .history {
      width: 128px;
      height: 105.5px;
      font-size: 15px;
      position: relative;
      margin-right: 2.5px;

      /* 测一测历史内部的文字样式 */
      .font {
        width: 79px;
        height: 14.5px;
        font-weight: bold;
        position: absolute;
        top: 22.5px;
        left: 21.5px;
      }
      /* 测一测历史内部的图像样式 */
      .img {
        width: 45px;
        height: 45px;
        position: absolute;
        top: 40px;
        left: 66px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  /* 中间细线的样式 */
  .center-line {
    width: 100%;
    height: 2px;
    margin-left: 16px;
    border: 1px solid #f1f1f1;
  }

  /* 用过的产品外部样式 */
  .product {
    width: 100%;
    height: 52px;
    // background-color: aqua;
    position: relative;
    /* 用过的产品图片样式 */
    .img {
      width: 18px;
      height: 20px;
      position: absolute;
      left: 17px;
      top: 18px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    /* 用过的产品文字样式 */
    span {
      font-size: 15px;
      font-weight: bold;
      position: absolute;
      top: 21px;
      left: 53px;
    }
    /* 用过的产品箭头样式 */
    .arrow {
      width: 6px;
      height: 12px;
      position: absolute;
      top: 21px;
      right: 18px;
      font-size: 18px;
      color: #b9b9b9;
    }
  }

  /* banner外部样式 */
  .banner {
    width: 100%;
    height: 84px;
    img {
      width: 100%;
      height: 100%;
    }
  }

  /* 收藏的产品外部样式 */
  .collection {
    width: 100%;
    height: 52px;
    position: relative;
    /* 收藏的产品图片样式 */
    .img {
      width: 18px;
      height: 20px;
      position: absolute;
      left: 17px;
      top: 18px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    /* 收藏的产品文字样式 */
    span {
      font-size: 15px;
      font-weight: bold;
      position: absolute;
      top: 21px;
      left: 53px;
    }
    /* 收藏的产品箭头样式 */
    .arrow {
      width: 6px;
      height: 12px;
      position: absolute;
      top: 21px;
      right: 18px;
      font-size: 18px;
      color: #b9b9b9;
    }
  }

  /* 关注的品牌外部样式 */
  .follow {
    width: 100%;
    height: 52px;
    position: relative;
    /* 关注的品牌图片样式 */
    .img {
      width: 18px;
      height: 20px;
      position: absolute;
      left: 17px;
      top: 18px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    /* 关注的品牌文字样式 */
    span {
      font-size: 15px;
      font-weight: bold;
      position: absolute;
      top: 21px;
      left: 53px;
    }
    /* 关注的品牌箭头样式 */
    .arrow {
      width: 6px;
      height: 12px;
      position: absolute;
      top: 21px;
      right: 18px;
      font-size: 18px;
      color: #b9b9b9;
    }
  }
  /* 灰色线条样式 */
  .gray-line {
    width: 100%;
    height: 11px;
    background-color: #eeeeee;
  }

  /* 我发布的贴子外部样式 */
  .release {
    width: 100%;
    height: 52px;
    position: relative;
    /* 我发布的贴子图片样式 */
    .img {
      width: 18px;
      height: 20px;
      position: absolute;
      left: 17px;
      top: 18px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    /* 我发布的贴子文字样式 */
    span {
      font-size: 15px;
      font-weight: bold;
      position: absolute;
      top: 21px;
      left: 53px;
    }
    /* 我发布的贴子箭头样式 */
    .arrow {
      width: 6px;
      height: 12px;
      position: absolute;
      top: 21px;
      right: 18px;
      font-size: 18px;
      color: #b9b9b9;
    }
  }

  /* 我收藏的文章外部样式 */
  .article {
    width: 100%;
    height: 52px;
    position: relative;
    /* 我收藏的文章图片样式 */
    .img {
      width: 18px;
      height: 20px;
      position: absolute;
      left: 17px;
      top: 18px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    /* 我收藏的文章文字样式 */
    span {
      font-size: 15px;
      font-weight: bold;
      position: absolute;
      top: 21px;
      left: 53px;
    }
    /* 我收藏的文章箭头样式 */
    .arrow {
      width: 6px;
      height: 12px;
      position: absolute;
      top: 21px;
      right: 18px;
      font-size: 18px;
      color: #b9b9b9;
    }
  }

  /* 我收藏的贴子外部样式 */
  .post {
    width: 100%;
    height: 52px;
    position: relative;
    /* 我收藏的贴子图片样式 */
    .img {
      width: 18px;
      height: 20px;
      position: absolute;
      left: 17px;
      top: 18px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    /* 我收藏的贴子文字样式 */
    span {
      font-size: 15px;
      font-weight: bold;
      position: absolute;
      top: 21px;
      left: 53px;
    }
    /* 我收藏的贴子箭头样式 */
    .arrow {
      width: 6px;
      height: 12px;
      position: absolute;
      top: 21px;
      right: 18px;
      font-size: 18px;
      color: #b9b9b9;
    }
  }

  /* 我的订单管理外部样式 */
  .cart {
    width: 100%;
    height: 52px;
    position: relative;
    /* 我的订单管理图片样式 */
    .img {
      width: 18px;
      height: 20px;
      position: absolute;
      left: 17px;
      top: 18px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    /* 我的订单管理文字样式 */
    span {
      font-size: 15px;
      font-weight: bold;
      position: absolute;
      top: 21px;
      left: 53px;
    }
    /* 我的订单管理箭头样式 */
    .arrow {
      width: 6px;
      height: 12px;
      position: absolute;
      top: 21px;
      right: 18px;
      font-size: 18px;
      color: #b9b9b9;
    }
  }
}
}
  
</style>
